<!-- 适用使用到组织树的地方 -->
<template>
    <div class="organization-tree" >
        <el-form style="height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;">
            <el-input
                placeholder="搜索名称"
                suffix-icon="el-icon-search"
                v-model="orgName">
            </el-input>
        </el-form>
        <!-- 组织树 -->
        <div style="width: 180px;overflow:auto;height: calc(100% - 160px)">
            <el-tree
                :expand-on-click-node="false"
                :data="hotSite"
                :props="defaultProps"
                ref="tree"
                @node-click="handleNodeClick"
                :filter-node-method="filterNode"
                :default-expand-all="defaultExpand"></el-tree>
        </div>
        <el-button type="primary" style="position: absolute;bottom: 10px;left: 20px;
    width: 170px;" @click="checkNode" >{{defaultExpand ? '一键收起' : '一键展开'}}</el-button>
    </div>
</template>

<script>
    import API from '@/request/api'

    export default {
        name: 'OrganizationTree',
        props:{
           /* oegType:{
                type: Number,
                default: 1 //默认监管座舱
            }*/
        },
        components: {
        },
        computed: {

        },
        data() {
            return {
                hotSite: [], // 组织架构
                orgName: '',
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                type:'',
                defaultExpand:false
            };
        },
        mounted() {

            // 监管座舱
           /* if(this.oegType === 1){
                this.type = 'getOrgTreeJ'
            }
            // 调控管家
            if( this.oegType === 2){
                this.type = 'getOrgTreeT'
            }*/
            this.getMenuList()
        },
        watch: {
            orgName(val) {
                this.$refs.tree.filter(val);
            }
        },
        methods: {
            // 获取机构列表
            getMenuList(){
                // 默认加载获取当前账号下组织架构
                const that = this
                API.getOrgTreeJ().then(res => {
                    if(res.code === 0){

                        if(res.result && res.result.length > 0){

                            res.result.forEach((i,index) =>{

                                i.children.forEach((subi,sindex) => {

                                    if(index === 0 && sindex === 0){
                                       that.$emit('initTree',subi);
                                    }

                                    if(subi.children.length > 0){
                                        let sour = {
                                            "id": "100",
                                            "level": "9",
                                            "name": "热源",
                                            "parentId": i.id,
                                            children:[]
                                        };

                                        let hot = {
                                            "id": "100",
                                            "level": "9",
                                            "name": "换热站",
                                            "parentId": i.id,
                                            children:[]
                                        };
                                        subi.children.forEach(subi2 => {
                                            if (subi2.level === '7') {
                                                sour.children.push(subi2)
                                            } else {
                                                hot.children.push(subi2)
                                            }
                                        })
                                        subi.children = [sour,hot]
                                    }
                                })
                            })
                        }
                            this.hotSite = res.result;
                    }else{
                        this.msgWarning(res.message);
                    }

                }).catch(err => {
                    //this.msgWarning(err);
                });
            },
            handleNodeClick(data) {
                this.$emit('changeType',data);
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            // 一键展开或者一键收起
            checkNode(){
                this.defaultExpand = !this.defaultExpand;
                this.changeTreeNodeStatus(this.$refs.tree.store.root)
            },
            // 改变节点的状态
            changeTreeNodeStatus (node) {
                node.expanded = this.defaultExpand;
                for (let i = 0; i < node.childNodes.length; i++) {
                    // 改变节点的自身expanded状态
                    node.childNodes[i].expanded = this.defaultExpand;
                    // 遍历子节点
                    if (node.childNodes[i].childNodes.length > 0) {
                        this.changeTreeNodeStatus(node.childNodes[i])
                    }
                }
            }
        }
    };
</script>

<style lang="scss" type="text/scss" scoped>
    .organization-tree {
        padding:0 16px;
        position: relative;
        height:100%;


        ::v-deep .el-tree{
           background-color: transparent !important;
            border: none !important;
            display: inline-block;
            min-width: 100%;
        }

        ::v-deep .el-tree-node{

            >.el-tree-node__content{
                font-size: 18px;
                color: rgba(0,228,255,1);
                height: 40px;
                line-height: 40px;
                margin: 7px 0px;
                background: rgba(19,41,77,0.42);
                border: 2px solid #00a0e9;
                width: 175px;
            }
        }

        ::v-deep .el-tree-node__children{

            .el-tree-node__content{
                background: none;
                border: none;
                line-height: 30px;
                height: 30px;
            }
        }
    }
</style>

